<div class="row">
  <div class="col-md-6 col-sm-8 col-sm-push-2">
    <form action="#" method="post" class="form form-horizontal" [formGroup]="siteDeviceForm" (ngSubmit)="onSubmit()">
      <div class="one-form-header"></div>
      <div class="one-form-body">

        <div class="form-group">
          <label for="monitor_add_snCode" class="col-xs-3 control-label"><span style="color: red;">*</span> 设备编号: </label>
          <div class="col-xs-9">
            <input type="hidden" id="id" formControlName="id" name="id">
            <input type="text" class="form-control" placeholder="设备编号" id="monitor_add_snCode" required formControlName="snCode" maxlength="10">
            <div *ngIf="formErrors.snCode" class="has-error">
              <label class="control-label"><i class="fa fa-times-circle-o"></i>{{formErrors.snCode}} </label>
            </div>
          </div>
        </div>

        <div class="form-group">
          <label for="monitor_add_mPhone" class="col-xs-3 control-label">联系电话:</label>
          <div class="col-xs-9">
            <input type="text" class="form-control" placeholder="手机号" id="monitor_add_mPhone"formControlName="mPhone" maxlength="11">
            <div *ngIf="formErrors.mPhone" class="has-error">
              <label class="control-label"><i class="fa fa-times-circle-o"></i>{{formErrors.mPhone}} </label>
            </div>
          </div>
        </div>

        <div class="form-group">
          <label for="monitor_add_monitorCode" class="col-xs-3 control-label" ><span style="color: red;">*</span> 设备类型:</label>
          <div class="col-xs-9">
            <!-- 下拉框 -->
            <select class="multiselect" id="monitor_add_monitorCode" class="form-control" formControlName="monitorCode" required>
              <option value="">-- 请选择设备类型 --</option>
              <option *ngFor="let codMonitor of codMonitors" [value]="codMonitor.monitorCode">{{codMonitor.monitorName}}</option>
            </select>
          </div>
        </div>

        <div class="form-group">
          <label for="monitor_add_statusUse" class="col-xs-3 control-label" ><span style="color: red;">*</span> 设备使用状态</label>
          <div class="col-xs-9">
            <!-- 下拉框 -->
            <select class="multiselect" class="form-control" id="monitor_add_statusUse" formControlName="statusUse" required>
              <option *ngFor="let dic of useStatusArr" [value]="dic.value">{{dic.display}}</option>
            </select>
          </div>
        </div>

        <div class="form-group">
          <label for="monitor_add_statusWork" class="col-xs-3 control-label" ><span style="color: red;">*</span> 设备运行状态</label>
          <div class="col-xs-9">
            <!-- 下拉框 -->
            <select class="multiselect" class="form-control" id="monitor_add_statusWork" formControlName="statusWork" required>
              <option *ngFor="let dic of workStatusArr" [value]="dic.value">{{dic.display}}</option>
            </select>
          </div>
        </div>

        <div class="form-group">
          <label for="monitor_add_transMode" class="col-xs-3 control-label"><span style="color: red;">*</span> 数据传输方式:</label>
          <div class="col-xs-9">
            <!-- 下拉框 -->
            <select class="multiselect" id="monitor_add_transMode" class="form-control" formControlName="transMode"
                    required>
              <option *ngFor="let dic of dicTransModeArr" [value]="dic.value">{{dic.display}}</option>
            </select>
          </div>
        </div>

        <div class="form-group">
          <label for="monitor_add_clientipinf_client" class="col-xs-3 control-label">设备通讯地址:</label>
          <div class="col-xs-9">
            <input type="text" class="form-control" placeholder="客户端通讯地址" id="monitor_add_clientipinf_client" formControlName="clientipinfClient" maxlength="190">
          </div>
        </div>
        <div class="form-group">
          <label for="monitor_add_clientipinf_server" class="col-xs-3 control-label">服务端通讯地址:</label>
          <div class="col-xs-9">
            <input type="text" class="form-control" placeholder="服务端通讯地址" id="monitor_add_clientipinf_server" formControlName="clientipinfServer" maxlength="190">
          </div>
        </div>
        <div class="form-group">
          <label for="monitor_add_clientipinf_transter" class="col-xs-3 control-label">下发通讯地址:</label>
          <div class="col-xs-9">
            <input type="text" class="form-control" placeholder="下发通讯地址" id="monitor_add_clientipinf_transter" formControlName="clientipinfTranster" maxlength="190">
          </div>
        </div>

        <div class="form-group" >
          <label for="monitor_add_remark" class="col-xs-3 control-label">描述:</label>
          <div class="col-xs-9">
            <textarea rows="2" cols="20" id="monitor_add_remark" style="width:100%" formControlName="remark" maxlength="50"></textarea>
            <div *ngIf="formErrors.remark" class="has-error">
              <label class="control-label"><i class="fa fa-times-circle-o"></i>{{formErrors.remark}} </label>
            </div>
          </div>
        </div>
      </div>

      <div class="one-form-footer">
        <div class="pull-right">
          <button class="btn btn-default" type="reset" (click)="cancelSiteMonitorAdd()">取消</button>
          <button class="btn btn-success" type="submit" [disabled]="!siteDeviceForm.valid">保存</button>
        </div>
      </div>
    </form>
  </div>
</div>
